<template>
  <div class="mine_box">
    <!--占位-->
    <!--<div class="position"></div>-->
    <!--登录注册-->
    <div class="top_bg" v-if="username == ''">
      <div class="clearfix button_box">
        <div class="button" @tap="jumpto('/login')">登录</div>
        <div class="shu">|</div>
        <div class="button" @tap="jumpto('/register')">注册</div>
      </div>
    </div>
    <div class="top_bg" v-if="username != ''">
      <div style="color: white;line-height: 3.2rem">欢迎您，{{ username }}</div>
    </div>
    <!--按钮-->
    <div class="clearfix button_bar" @tap="jumpto('/aboutus')">
      <span class="font left">关于我们</span>
      <span class="mui-icon mui-icon-arrowright font right"></span>
    </div>
    <div class="clearfix button_bar" @tap="jumpto('/contactus')">
      <span class="font left">联系我们</span>
      <span class="mui-icon mui-icon-arrowright font right"></span>
    </div>
    <div class="clearfix button_bar">
      <a class="phone" href="tel:4008003002">客服电话:400-800-3002</a>
    </div>
    <div v-if="username != ''" @tap="logout">
      <mt-button class="btn" type="default" size="large">退出登录</mt-button>
    </div>
  </div>
</template>

<script>
  import storage from 'storejs'

  export default {
    data: function () {
      return {
        username: '',  //是否登录
      }
    },
    created() {
      this.username = storage.get('username') || '';
    },
    methods: {
      jumpto(url) {
        this.$router.push(url)
      },
      logout() {
        localStorage.removeItem('username');
        localStorage.removeItem('password');
        this.username = '';
        this.$msg('退出成功');
        this.$router.push('/');
      }
    }
  }
</script>

<style scoped>

  .mine_box {
    background: #F3F6F6;
  }

  .mine_box .position {
    height: 0.8rem
  }

  .mine_box .top_bg {
    height: 3.2rem;
    background: url(../../../static/img/login_bg.png);
    background-size: 100% 100%;
    text-align: center;
  }

  .mine_box .top_bg .button_box {
    border: solid 1px white;
    display: inline-block;
    margin-top: 1.2rem;
    border-radius: 5px;
  }

  .mine_box .top_bg .button_box .button {
    float: left;
    font-size: 0.24rem;
    color: white;
    width: 1.18rem;
    text-align: center;
    line-height: 0.72rem;
  }
  .mine_box .top_bg .button_box .shu {
    color: white;
    float: left;
    line-height: 0.72rem;
    font-size: 0.32rem;
  }

  .mine_box .button_bar {
    border-top: solid 1px #e0e0e0;
    border-bottom: solid 1px #e0e0e0;
    height: 0.9rem;
    margin-top: 0.3rem;
    background: white;
    padding: 0 0.2rem;
    text-align: center;
  }

  .mine_box .button_bar .phone {
    color: #03bbf8;
    line-height: 0.9rem;
  }

  .mine_box .button_bar .font {
    color: #333333;
    font-size: 0.26rem;
    line-height: 0.9rem;
  }

  .mine_box .button_bar .left {
    float: left;
  }

  .mine_box .button_bar .right {
    float: right;
  }

  .btn {
    background-color: #fff;
    margin-top: 0.1rem;
    font-size: 16px;
    border-radius: 0;
    height: 0.9rem;
  }
</style>
